import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { List, InputItem, WhiteSpace, Button, Radio, Toast } from 'antd-mobile';
import md5 from 'md5';
import styles from './index.css';

const RadioItem = Radio.RadioItem;
class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: undefined,
      password: undefined,
      telephone: undefined,
      type: 'boss'
    };
  }
  handleInput (key, val) {
    this.setState({ [key]: val});
  }
  handleRadio (val) {
    this.setState({ type: val });
  }
  handleSubmit () {
    const { dispatch } = this.props;
    const { userName, password, telephone, type } = this.state;
    if (userName && password && telephone) {
      dispatch({
        type: 'user/register',
        payload: {
          userName,
          password: md5(password),
          telephone,
          type
        },
        cb () {
          dispatch(routerRedux.push({ pathname: '/home' }));
        },
      });
    } else {
      Toast.fail('请完善必填字段', 1);
    }
  }
  render () {
    const { userName, password, telephone, type } = this.state;
    return (
      <div className={styles.registerPage}>
        <img className={styles.registerAvatar} src={require('../../assets/yay.jpg')} alt="avatar img" />
        <WhiteSpace size="xl" />
        <List className={styles.registerList}>
          <InputItem
            onChange={this.handleInput.bind(this, 'userName')}
            value={userName}
            clear
            error={!userName}
            maxLength={10}
            placeholder="请输入用户名"
          >
            用户名
          </InputItem>
          <InputItem
            onChange={this.handleInput.bind(this, 'password')}
            value={password}
            clear
            error={!password}
            maxLength={6}
            type="password"
            placeholder="请输入密码"
          >
            密码
          </InputItem>
          <InputItem
            onChange={this.handleInput.bind(this, 'telephone')}
            value={telephone}
            clear
            error={!telephone}
            maxLength={11}
            type="phone"
            placeholder="请输入手机号"
          >
            手机号
          </InputItem>
        </List>
        <WhiteSpace size="xl" />
        <List className={styles.registerList}>
          <RadioItem key="boss" checked={type === 'boss'} onChange={this.handleRadio.bind(this, 'boss')}>
            Boss
          </RadioItem>
          <RadioItem key="genius" checked={type === 'genius'} onChange={this.handleRadio.bind(this, 'genius')}>
            牛人
          </RadioItem>
        </List>
        <WhiteSpace size="xl" />
        <Button
          className={styles.registerButton}
          type="primary"
          onClick={this.handleSubmit.bind(this)}
          size="small"
        >
          注册
        </Button>
        <WhiteSpace size="xl" />
        <div className={styles.registerLink}>
          <Link to="/">已注册，前往登录</Link>
        </div>
        
      </div>
    )
  }
}
export default connect()(Register);
